{% extends 'base/base.html' %}
{% load static %}

{% block title %}小说驿站-注册{% endblock title %}

{% block static_file %}
    <link href="{% static 'css/login.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'js/login.js' %}"></script>
{% endblock static_file %}

{% block head_file %}
    <style>
        .submit {
            margin-left: 82px;
        }

        .menu_3 input[type=password] {
            border: none;
            background: none;
            border: 1px solid #C7C5C5;
            border-radius: 3px;
            width: 250px;
            padding: 0px 3px 0px;
            height: 32px;
            line-height: 32px;
            margin-left: 5px;
        }
    </style>
{% endblock head_file %}

{% block search_box %}{% endblock search_box %}]
{% block navigation %}{% endblock navigation %}

{% block body %}
    <div class="box">
        <h3>小说驿站-用户注册</h3>
        <div class="menu_3">
            <form id="user_name" enctype="multipart/form-data" action="{% url 'user:register' %}" method="post">
                {% csrf_token %}
                <p><span>用 户 名：</span> <input type="text" name="username" value="" class="text_1"
                                                 placeholder="请输入用户名（不包含中文）" autocomplete="off" required>
                </p>
                <p><span>邮 &nbsp; &nbsp; &nbsp;箱：</span> <input type="text" name="email" class="text_2"
                                                                  autocomplete="off" placeholder="请输入邮箱" required>
                </p>
                <p><span>密 &nbsp; &nbsp; &nbsp;码：</span> <input type="password" name="password1" class="text_3"
                                                                  autocomplete="off"
                                                                  required>
                </p>
                <p>
                    <span>确认密码：</span> <input type="password" name="password2" class="text_3" autocomplete="off"
                                                  required>
                    <br/><span class="none">
                    </span>
                </p>
                <span class="errmsg" style="color: red"></span>
                <p><input type="submit" value="注 册" class="submit"></p>
            </form>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            // 表单提交事件
            $("#user_name").submit(function (e) {
                e.preventDefault(); // 阻止表单默认提交行为

                // 获取表单数据
                var username = $("input[name='username']").val();
                var email = $("input[name='email']").val();
                var password1 = $("input[name='password1']").val();
                var password2 = $("input[name='password2']").val();

                var regex = /^\s*([a-zA-Z0-9][\w\\.]{2,15})+@([a-zA-Z0-9]{2,5})+\.([a-zA-Z0-9]{2,5})\s*$/;
                if (!regex.test(email)) {
                    alert("邮箱格式不正确");
                    return;
                }

                if (password1.length < 6) {
                    alert("密码必须6位以上");
                    return;
                }

                if (password1 !== password2) {
                    alert("两次输入的密码不一致");
                    return;
                }
                var csrfToken = $("input[name='csrfmiddlewaretoken']").val();

                // 数据校验通过，发送AJAX请求
                $.ajax({
                    type: "POST",
                    url: "{% url 'user:register' %}",
                    data: {
                        csrfmiddlewaretoken: csrfToken,
                        username: username,
                        email: email,
                        password: password1
                    },
                    success: function (response) {
                        if (response.success) {
                            window.location.href = "{% url 'user:login' %}";
                        } else {
                            var errorMessage = response.errmsg; // 获取后端返回的错误信息
                            $(".errmsg").text(errorMessage); // 将错误信息显示在前端的 <span class="errmsg"> 标签中
                            $(".errmsg").show(); // 显示错误信息
                        }
                    },
                });
            });
        });
    </script>
{% endblock body %}

